
<template>
    <div class="regulation-container">
        <div class="chart" id="chart_left2"></div>
    </div>
</template>

<script>
    // 政府部门大屏:左2圆环图： 三种监管类型机构分布图
    import { getAction } from '@/api/manage'
    import { mixinDevice } from '@/utils/mixin.js'
    export default {
        name: 'regulationType',
        mixins: [mixinDevice],
        props: {
            // 父组件传递过来的值
            areaCode: {
                type: String,
                default: ''
            },
            areaLevel: {
                type: String,
                default: ''
            },
            mwWeightSum: {
                type: Number,
                default: 0
            }
        },
        data() {
            return {
                info : null,
                weightData: [
                    {
                        value : 0,
                        unit : 'KG',
                        supervise : 0
                    },
                    {
                        value : 0,
                        unit : 'KG',
                        supervise : 1
                    },
                    {
                        value : 0,
                        unit : 'KG',
                        supervise : 2
                    }
                ],
            }
        },
        mounted() {
            //参数赋值
            this.getStatisticsData()
        },
        // 监听器：监听参数的变化
        watch: {
            // 如果 `areaCode` 发生改变，这个函数就会运行
            // areaCode: function(newValue, oldValue) {
            //     this.getStatisticsData()
            // },
            mwWeightSum: function(newValue, oldValue) {
                this.getStatisticsData()
            },
        },
        methods: {
            async getStatisticsData() {
                let params = {
                    areaCode: this.areaCode,
                    areaLevel: this.areaLevel
                }
                let res = await getAction('/hc/Statistical/getSupervisionLevel', params)
                if (res && res.success) {
                    this.info = res.result || null;
                    this.refData(this.info);
                }
            },
            refData : function(info){
                if(!this.info){
                    return;
                }
                let count = this.mwWeightSum;
                console.log('[-----圆环图返回的数据----]', count,info)
                let level0Weight = 0 ;
                let level0Unit = 'KG' ;
                let level1Weight = 0 ;
                let level1Unit = 'KG' ;
                let level2Weight = 0 ;
                let level2Unit = 'KG' ;

                if(info){
                    level0Weight = info.level0.number;
                    if(level0Weight > 10000){
                        level0Weight = parseInt(level0Weight/1000);
                        level0Unit = '吨';
                    }
                    level1Weight = info.level1.number;
                    if(level1Weight > 10000){
                        level1Weight = parseInt(level1Weight/1000);
                        level1Unit = '吨';
                    }
                    level2Weight = info.level2.number;
                    if(level2Weight > 10000){
                        level2Weight = parseInt(level2Weight/1000);
                        level2Unit = '吨';
                    }
                }
                // supervise  监管等级  0简化  1一般   2重点
                this.weightData = [
                    {
                        weight : info.level0.number || 0,
                        value : level0Weight,
                        unit : level0Unit,
                        supervise : 0,
                    },
                    {
                        weight : info.level1.number || 0,
                        value : level1Weight,
                        unit : level1Unit,
                        supervise : 1,
                    },
                    {
                        weight : info.level2.number || 0,
                        value : level2Weight,
                        unit : level2Unit,
                        supervise : 2,
                    }
                ];
                this.weightData.forEach((item) => {
                    if(item.weight && (item.weight > 0) && (item.weight < count )){
                        item['proportion'] = parseFloat((item.weight/count) * 100).toFixed(2);
                    }else if(item.weight && (item.weight > 0) && (item.weight = count )){
                        item['proportion'] = parseFloat((item.weight/count) * 100).toFixed(2);
                    }else{
                        item['proportion'] = 0;
                    }
                })
                this.getEchartLeft2();
            },
            getEchartLeft2() {
                let myChart = this.$echarts.init(document.getElementById('chart_left2'))
                let dataStyle = {
                    normal: {
                        label: {
                            show: false
                        },
                        labelLine: {
                            show: false
                        },
                        shadowBlur: 0,
                        shadowColor: '#203665'
                    }
                }
                let self = this;
                let data = this.weightData;
                let option = {
                    series: [
                        {
                            name: '第一个圆环',
                            type: 'pie',
                            clockWise: false,
                            radius: self.isMobile() ? [50,45] : [70, 60],
                            itemStyle: dataStyle,
                            hoverAnimation: false,
                            center: ['15%', '50%'],
                            data: [
                                {
                                value: data[0]['proportion'], //一级以下医疗机构重量
                                num: 10,
                                label: {
                                    normal: {
                                        rich: {
                                            a: {
                                                color: '#00ffff',
                                                align: 'center',
                                                fontSize: self.isMobile() ? 12 : 15,
                                                fontWeight: 'bold'
                                            },
                                            b: {
                                                color: '#fff',
                                                align: 'center',
                                                fontSize: self.isMobile() ? 10 : 12
                                            }
                                        },
                                        formatter: function(params) {
                                            let unit = data[0]['unit'];
                                            let proportion = data[0]['proportion'];
                                            let value = data[0]['value'];
                                            return '\n{b|一级以下医疗机构}\n\n' + '{a|' + value + unit + '}\n\n' + '{b|占比' + proportion + '%}'
                                        },
                                        position: 'center',
                                        show: true,
                                        textStyle: {
                                            fontSize: '14',
                                            fontWeight: 'normal',
                                            color: '#fff'
                                        }
                                    }
                                },
                                itemStyle: {
                                    normal: {
                                        color: '#00ffff',
                                        shadowColor: '#00ffff',
                                        shadowBlur: 0
                                    }
                                }
                            }, {
                                value: 100-data[0]['proportion'],
                                name: 'invisible',

                                itemStyle: {
                                    normal: {
                                        color: 'rgba(220,230,248,0.4)'
                                    },
                                    emphasis: {
                                        color: 'rgba(220,230,248,0.4)'
                                    }
                                }
                            }]
                        },
                        {
                            name: '第二个圆环',
                            type: 'pie',
                            clockWise: false,
                            radius: self.isMobile() ? [50,45] : [70, 60],
                            itemStyle: dataStyle,
                            hoverAnimation: false,
                            center: ['50%', '50%'],
                            data: [{
                                value: data[1]['proportion'], // 一级医疗机构重量
                                label: {
                                    normal: {
                                        rich: {
                                            a: {
                                                color: '#00cfff',
                                                align: 'center',
                                                fontSize: self.isMobile() ? 12 : 15,
                                                fontWeight: 'bold'
                                            },
                                            b: {
                                                color: '#fff',
                                                align: 'center',
                                                fontSize: self.isMobile() ? 10 : 12,
                                            }
                                        },
                                        formatter: function(params) {
                                            let unit = data[1]['unit'];
                                            let proportion = data[1]['proportion'];
                                            let value = data[1]['value'];
                                            return '\n{b|一级医疗机构}\n\n' + '{a|' + value + unit + '}' + '\n\n{b|占比' + proportion + '%}'
                                        },
                                        position: 'center',
                                        show: true,
                                        textStyle: {
                                            fontSize: '14',
                                            fontWeight: 'normal',
                                            color: '#fff'
                                        }
                                    }
                                },
                                itemStyle: {
                                    normal: {
                                        color: '#00cfff',
                                        shadowColor: '#00cfff',
                                        shadowBlur: 0
                                    }
                                }

                            }, {
                                value: 100-data[1]['proportion'],
                                name: 'invisible',
                                itemStyle: {
                                    normal: {
                                        color: 'rgba(220,230,248,0.4)'
                                    },
                                    emphasis: {
                                        color: 'rgba(220,230,248,0.4)'
                                    }
                                }
                            }]
                        },
                        {
                            name: '第三个圆环',
                            type: 'pie',
                            clockWise: false,
                            radius: self.isMobile() ? [50,45] : [70, 60],
                            itemStyle: dataStyle,
                            hoverAnimation: false,
                            center: ['85%', '50%'],
                            data: [{
                                value: data[2]['proportion'], // 一级医疗机构重量
                                label: {
                                    normal: {
                                        rich: {
                                            a: {
                                                color: '#036ade',
                                                align: 'center',
                                                fontSize: self.isMobile() ? 12 : 15,
                                                fontWeight: 'bold'
                                            },
                                            b: {
                                                color: '#fff',
                                                align: 'center',
                                                fontSize: self.isMobile() ? 10 : 12,
                                            }
                                        },
                                        formatter: function(params) {
                                            let unit = data[2]['unit'];
                                            let proportion = data[2]['proportion'];
                                            let value = data[2]['value'];
                                            return '\n{b|二级及二级以上}\n\n' + '{a|' + value + unit + '}' + '\n\n{b|占比' + proportion + '%}'
                                        },
                                        position: 'center',
                                        show: true,
                                        textStyle: {
                                            fontSize: '14',
                                            fontWeight: 'normal',
                                            color: '#fff'
                                        }
                                    }
                                },
                                itemStyle: {
                                    normal: {
                                        color: '#036ade',
                                        shadowColor: '#036ade',
                                        shadowBlur: 0
                                    }
                                }

                            }, {
                                value: 100-data[2]['proportion'],
                                name: 'invisible',
                                itemStyle: {
                                    normal: {
                                        color: 'rgba(220,230,248,0.4)'
                                    },
                                    emphasis: {
                                        color: 'rgba(220,230,248,0.4)'
                                    }
                                }
                            }]
                        }]
                }

                myChart.setOption(option, true)

                window.addEventListener('resize', () => {
                    myChart.resize()
                })
            },

            beforeDestroy() {
                clearInterval(this.timer)
            }
        }
    }
</script>

<style lang="less" scoped>
    .regulation-container {
        .chart {
            height: 3rem;

        }
    }
</style>
